import { Button, Form,Input,Select } from "antd";
import jsonDataUtils from "../jsonDataUtils";
import styles from "./answerStyle.less";
import RcViewer from '@hanyk/rc-viewer';
import UserSession from "@/UserSession";

const ReferAnswerShow = props => {
  const { changeRefer,removeRefer,hasBtn } = props;
  const answer = JSON.parse(JSON.stringify(props.answer))
  const boxStyle = {
    background: '#FFFFFF',
    border: '1px solid #D9D9D9'
  }
  const boxNoBorderStyle = {
    
  }
  const answerStyle = {
    padding:10,
  }
  const referStyle = {
    height: '40px',
    background: '#F5F7FA',
    lineHeight:'40px',
    display:'flex',
    padding:'0 10px',
    borderTop:'1px solid #D9D9D9'
  }
  const questionStyle = {
    width:'calc(100% - 90px)',
    overflow:'hidden',
    textOverflow:'ellipsis',
    whiteSpace:'nowrap'
  }
  const referTitleStyle = {
    color:'#333333',
    fontSize:'14px'
  }
  const questionTxtStyle = {
    color:'#3E5BFF',
    fontSize:'14px'
  }
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 3 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  if(answer.contentType == 2 && !answer.cardVo && jsonDataUtils.isJsonString(answer.content)){
    answer.cardVo = JSON.parse(answer.content)
  }

  const { cardVo } = answer;

  return (
    <div style={hasBtn ? boxStyle : boxNoBorderStyle}>
      <div style={answerStyle} className={styles.answerShowBox}>
        {
          answer.contentType == 2 ? (
            <div>
              <Form.Item label='引导话术' {...formItemLayout}>
                <Input.TextArea autoSize placeholder="" disabled value={cardVo.data.guide} />
              </Form.Item>
              <Form.Item label='卡片标题' {...formItemLayout}>
                <Input.TextArea autoSize placeholder="" disabled value={cardVo.data.title} />
              </Form.Item>
              <Form.Item label='卡片描述' {...formItemLayout}>
                <Input.TextArea autoSize placeholder="" disabled value={cardVo.data.desc}/>
              </Form.Item>
              <Form.Item label='卡片图片' {...formItemLayout}>
                <img style={{width:86,height:86}} src={cardVo.data.imgUrl} />
              </Form.Item>
              <Form.Item label='跳转对象' {...formItemLayout}>
                <Select value={cardVo.type} disabled>
                  <Select.Option value={'WEB'}>网页</Select.Option>
                  <Select.Option value={'APP'}>APP</Select.Option>
                  <Select.Option value={'WXAPP'}>微信小程序</Select.Option>
                  <Select.Option value={'DDAPP'}>钉钉小程序</Select.Option>
                  <Select.Option value={'FSAPP'}>飞书小程序</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item label='卡片链接' {...formItemLayout}>
                <Input.TextArea autoSize placeholder="" disabled value={cardVo.data.link} />
              </Form.Item>
              {
                cardVo.type != 'WEB' ? (
                  <div>
                    <Form.Item label='AppId' {...formItemLayout}>
                      <Input placeholder="" disabled value={cardVo.data.appId} />
                    </Form.Item>
                    <Form.Item label='Path' {...formItemLayout}>
                      <Input placeholder="" disabled value={cardVo.data.path} />
                    </Form.Item>
                    <Form.Item label='携带参数' {...formItemLayout}>
                      <Input placeholder="" disabled value={cardVo.data.params} />
                    </Form.Item>
                  </div>
                ) : ''
              }
              
            </div>
          ) : (
            <RcViewer>
              <div dangerouslySetInnerHTML={{__html:answer.content}}></div>
            </RcViewer>
          )
        }
        
      </div>

      {
        answer.question ? (
          <div style={referStyle}>
            <div style={questionStyle} title={answer.question}>
              <span style={referTitleStyle}>引用自答案库：</span>
              <span style={questionTxtStyle}>{answer.question}</span>
            </div>
            {
              hasBtn ? UserSession.isSystemKnowledge() ? null : (
                <div>
                  <Button type="link" size="small" style={{color:'#666666'}} onClick={changeRefer}>更换</Button>
                  <Button type="link" size="small" style={{color:'#666666'}} onClick={removeRefer}>取消</Button>
                </div>
              ) : ''
            }
            
          </div>
        ) : ''
      }
      
      
    </div>
  )
}

export default ReferAnswerShow